<!-- 维护机械 -->
<template>
  <div class="mechanicsPage">
    <div class="titleBox">
      <span>维护机械</span>
    </div>
    <div class="mechanicsBox">
      <div>
        <div class="itemNum">{{ listData.machines_count?listData.machines_count:'0' }}</div>
        <div class="itemName">机械总数量</div>
      </div>
      <div>
        <div class="itemNum">{{ listData.free_machines_count?listData.free_machines_count:'0' }}</div>
        <div class="itemName">空闲中机械</div>
      </div>
      <div>
        <div class="itemNum">{{ listData.work_machines_count?listData.work_machines_count:'0' }}</div>
        <div class="itemName">施工中机械</div>
      </div>
      <div>
        <div class="itemNum">{{ listData.iot_machines_count?listData.iot_machines_count:'0' }}</div>
        <div class="itemName">入网机械</div>
      </div>
    </div>
    <div class="navBarBox">
      <div class="itemBox">
        <div class="flexBox">
          <div class="itemTitleName">机械类型：</div>
          <div class="itemNavBar">
            <ul :class="isClick ? 'itemList' : 'itemList1'">
              <li
                class="itemAll"
                :class="{ activeClass: typeIndex == 1 }"
                @click="typeIndexBtn(typeIndex == 1)"
              >
                全部
              </li>
              <li
                class="itemListLi"
                :class="{ activeClass: itemTypeIndex == item.num }"
                v-for="(item, index) of mechanicsData"
                :key="index"
                @click="itemTypeIndexBtn(item.num, item.name)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
        <img
          src="./../../../../../public/img/mechanics/dwonIcon.png"
          v-if="mechanicsData.length > 6"
          :class="isClick ? 'dwonIconUp' : 'dwonIcon'"
          @click="isBtnData"
        />
      </div>
      <div class="itemBoxOne">
        <div class="flexBox">
          <div class="itemTitleName">机械状态：{{ tshow }}</div>
          <div class="itemNavBar">
            <ul :class="isShow ? 'itemList' : 'itemList1'">
              <li
                class="itemAll"
                :class="{ activeClass: infoIndex == 0 }"
                @click="infoIndexBtn(infoIndex == 0)"
              >
                全部
              </li>
              <li
                class="itemListLi"
                :class="{ activeClass: itemInfoIndex == items.id }"
                v-for="(items, i) of mechanicsInfo"
                :key="i"
                @click="itemInfoIndexBtn(items.id)"
              >
                {{ items.name }}
              </li>
            </ul>
          </div>
        </div>
        <img
          src="./../../../../../public/img/mechanics/dwonIcon.png"
          v-if="mechanicsInfo.length > 6"
          :class="isShow ? 'dwonIconUp' : 'dwonIcon'"
          @click="isBtnInfo"
        />
      </div>
    </div>
    <!-- 机械列表 -->
    <div class="mechanicsListData" v-if="mechanicsList.length>0">
      <div
        class="itemWarp"
        v-for="(itemMechanicsList, itemIndex) of mechanicsList"
        :key="itemIndex"
        @mouseover="seoverBtn(itemMechanicsList.machine_id)"
      >
        <div
          :class="{ titleImgBoxBg: itemMechanicsList.machine_id == hoverId }"
          @mouseleave="outhover"
        >
          <div class="editBox">
            <router-link :to="{name:'MechanicsInfo',query:{machineId:itemMechanicsList.machine_id}}">
            <div
              :class="
                itemMechanicsList.machine_status !== 1 &&
                itemMechanicsList.machine_status == 3
                  ? 'addData'
                  : 'addData1'
              "
              v-show="itemMechanicsList.machine_id == hoverId"
            >
              去查看
            </div>
            </router-link>
            <div
              class="editData"
              v-show="
                itemMechanicsList.machine_id == hoverId &&
                itemMechanicsList.machine_status !== 1 &&
                itemMechanicsList.machine_status == 3
              "
              @click="editBtn(itemMechanicsList.machine_id)"
            >
              编辑
            </div>
          </div>
        </div>
        <div class="titleImgBox">
          <img :src="itemMechanicsList.machine_jxzjimg" class="titleImg" />
          <!-- 机械状态 -->
          <div class="styleBgColor">
            <div
              class="styleBgColorName"
              v-if="
                itemMechanicsList.machine_status == 2 &&
                itemMechanicsList.machine_is_work == 1
              "
            >
              施工中
            </div>
            <div
              class="styleBgColorName"
              v-if="
                itemMechanicsList.machine_status == 2 &&
                itemMechanicsList.machine_is_work == 2
              "
            >
              空闲中
            </div>
            <div
              class="styleBgColorName"
              v-if="itemMechanicsList.machine_status == 0"
            >
              草稿
            </div>
            <div
              class="styleBgColorName"
              v-if="itemMechanicsList.machine_status == 1"
            >
              待审核
            </div>
          </div>
          <div
            class="styleBgColorOne"
            v-if="itemMechanicsList.machine_status == 3"
          >
            <div
              class="styleBgColorName1"
              v-if="itemMechanicsList.machine_status == 3"
            >
              审核失败
            </div>
            <div
              class="styleBgColorName1"
              v-if="itemMechanicsList.machine_status == 3"
            >
              {{ itemMechanicsList.machine_msg }}
            </div>
          </div>
        </div>
        <div class="infoList">
          <div class="infoListName">{{ itemMechanicsList.machine_name }}</div>
          <div class="infoListNameInfo">
            {{ itemMechanicsList.machine_brand
            }}{{ itemMechanicsList.machine_model }}
          </div>
          <div class="infoListAddress">
            {{ itemMechanicsList.machine_address }}
          </div>
        </div>
      </div>
    </div>
    <div class="noMessage" v-if="mechanicsList.length<=0">
      <div class="noMessageBg"></div>
      <div class="noMessageName">页面空空的</div>
    </div>
  </div>
</template>

<script >
import {
  getMachinetypemenuuc,
  getmachineListData,
  getmachinesandcount,
} from "./../../../../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      isClick: false,
      isShow: false,
      isImg: false,
      typeIndex: this.$route.query.typeIndex ? this.$route.query.typeIndex : 1, //机械类型全部索引
      itemTypeIndex: '', //机械类型索引
      infoIndex: 0, //机械状态全部索引
      itemInfoIndex: '', //机械状态索引
      hoverId: -1,
      mechanicsData: [], // 机械类型导航数据
      mechanicsInfo: [
        {
          id: 1,
          name: "空闲中",
        },
        {
          id: 2,
          name: "施工中",
        },
        {
          id: 3,
          name: "待审核",
        },
        {
          id: 4,
          name: "未过审",
        },
        {
          id: 5,
          name: "未提交",
        },
      ],
      typeName:'',
      listData: {}, //机械大厅数字数据
      mechanicsList: [], //机械列表
    };
  },
  props: {
    tshow: String,
    required: true,
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  // watch: {
  //   tshow(a) {
  //     console.log(a);
  //     console.log(this.tshow);
  //     this.getmachineListData();
  //   },
  // },
  // 方法集合
  methods: {
    isBtnData() {
      this.isClick = !this.isClick;
    },
    isBtnInfo() {
      this.isShow = !this.isShow;
    },
    // 机械类型全部
    typeIndexBtn() {
      this.typeIndex = 1;
      this.itemTypeIndex = '';
      this.getmachineListData(this.itemTypeIndex,this.typeName,this.itemInfoIndex);
    },
    // 机械类型每一项
    itemTypeIndexBtn(type, name) {
      this.typeIndex = -1;
      this.itemTypeIndex = type;
      this.typeName = name
      this.getmachineListData(type, name,this.itemInfoIndex);
    },
    // 机械状态全部
    infoIndexBtn() {
      this.infoIndex = 0;
      this.itemInfoIndex = '';
      this.getmachineListData(this.itemTypeIndex, this.typeName, '');
    },
    // 机械状态每一项
    itemInfoIndexBtn(info) {
      this.infoIndex = -1;
      this.itemInfoIndex = info;
      this.getmachineListData(this.itemTypeIndex, this.typeName, info);
    },
    seoverBtn(itemIndex) {
      this.hoverId = itemIndex;
    },
    outhover() {
      this.hoverId = -1;
    },
    // 编辑
    editBtn(machineId) {
      this.$router.push({ path: "/addMechanics", query: { machineId } });
    },
    // 获取机械一级导航
    async getMachinetypemenuuc() {
      try {
        let res = await getMachinetypemenuuc();
        if (res.data.result == "1") {
          this.mechanicsData = res.data.body.typeList;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 机械大厅列表
    async getmachineListData(type, name, info) {
      let data = {
        type: type ? type : "",
        machine_name: name ? name : "",
        status: info ? info : 0,
      };
      try {
        let res = await getmachineListData(data);
        if (res.data.result == "1") {
          this.mechanicsList = res.data.body.machine_list;
        }
      } catch (e) {}
    },
    // 机械大厅数字部分
    async getmachinesandcount() {
      try {
        let res = await getmachinesandcount();
        if (res.data.result == "1") {
          this.listData = res.data.body;
        }
      } catch (e) {}
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMachinetypemenuuc();
    this.getmachineListData();
    this.getmachinesandcount();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.mechanicsPage {
  width: 920px;
  margin-left: 20px;
}
.titleBox {
  width: 100%;
  background: #fff;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  span {
    margin-left: 20px;
  }
}
.mechanicsBox {
  margin-top: 20px;
  width: 100%;
  height: 122px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.itemNum {
  font-size: 30px;
  color: #ff7d59;
}
.itemName {
  font-size: 14px;
  color: #999;
  margin-top: 12px;
}
.navBarBox {
  margin-top: 20px;
  width: 100%;
  padding-bottom: 20px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(234, 234, 234, 0.5);
}
.itemBox {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  box-sizing: border-box;
  margin-left: 22px;
}
.itemBoxOne {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  box-sizing: border-box;
  margin-left: 22px;
}
.flexBox {
  display: flex;
}
.itemTitleName {
  font-size: 16px;
  color: #333;
  width: 80px;
}
.itemNavBar {
  margin-left: 30px;
}
.dwonIcon {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.dwonIconUp {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  transform: rotate(180deg);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.itemList {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
}
.itemList1 {
  display: flex;
  max-width: 700px;
  overflow: hidden;
}
.itemAll {
  min-width: 55px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.itemListLi {
  font-size: 16px;
  color: #333;
  min-width: 110px;
  margin-bottom: 10px;
  cursor: pointer;
}
.activeClass {
  color: #ff855b;
  font-size: 16px;
  cursor: pointer;
}
.mechanicsListData {
  width: 920px;
  margin-top: 50px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.itemWarp {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
  margin-right: 20px;
}
.titleImgBox {
  width: 279px;
  height: 242px;
  position: relative;
}
.titleImgBoxBg {
  width: 279px;
  height: 242px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  transition: all 0.8s;
}
.styleBgColor {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.styleBgColorOne {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
}
.styleBgColorName {
  margin-left: 10px;
}
.styleBgColorName1 {
  margin: 0 5px;
}
.styleBgColorTime {
  margin-right: 10px;
}
.titleImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infoList {
  margin: 20px auto 0 auto;
}
.infoListName {
  font-size: 16px;
  color: #333;
  text-align: center;
}
.infoListNameInfo {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
  text-align: center;
}
.infoListAddress {
  margin: 10px auto 0 auto;
  color: #999;
  font-size: 12px;
  text-align: center;
}
.editBox {
  margin-left: 40px;
  margin-right: 40px;
}
.addData {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ff7d59;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin-top: 74px;
  transition: all 0.8s;
  cursor: pointer;
}
.addData1 {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ff7d59;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin-top: 94px;
  transition: all 0.8s;
  cursor: pointer;
}
.editData {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ffffff;
  font-size: 14px;
  color: #333;
  margin-top: 20px;
  transition: all 0.8s;
  cursor: pointer;
}
.noMessageBg{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/noMessageImg.png')no-repeat;
  background-size: 100%,100%;
  position: absolute;
  top: 60%;
  left: 55%;
  transform: translate(-50%,-50%);
  width: 371px;
  height: 200px;
}
.noMessageName{
  position: absolute;
  top: 72%;
  left: 55%;
  transform: translate(-50%,-50%);
  font-size: 14px;
  color: #333;
}
</style>
